<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>


        .notification {
            position: relative;
            background-color: #555;
            color: white;
            text-decoration: none;
            padding: 15px 26px;
            display: inline-block;
        }
        .notification .badge {
            position: absolute;
            top: -10px;
            right: -10px;
            padding: 5px 10px;
            border-radius: 50%;
            background-color: red;
            color: white;
        }


        .notification:hover {
            background: green;
        }
    </style>
</head>

<body>

    <h1>Notification Button</h1>




    <a href="#" class="notification">
        <span>Inbox</span>
        <span class="badge">9</span>
    </a>




    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">

        必知必会

        <a href="#" class="notification">
            <span>Inbox</span>
            <span class="badge">3</span>
        </a>

        .notification {
            position: relative;
            background-color: #555;
            color: white;
            text-decoration: none;
            padding: 15px 26px;
            display: inline-block;
        }
        .notification .badge {
            position: absolute;
            top: -10px;           => 上移动 10 px, 右移动 10 px
            right: -10px;
            padding: 5px 10px;
            border-radius: 50%;
            background-color: red;
            color: white;
        }

        notification 是 a 标签, 模拟出来的 button:
        notification 父容器设置 position: relative

    </xmp>

</body>

</html>